/**
 * 标记的最大闪动次数
 */
const maxMarkFrequency = 2;

/**
 * 标记已闪动的次数
 */
let markFrequency = 0;

/**
 * 绘制棋盘
 */
function drawChessBoard() {
    const cacheCanvas = document.createElement('canvas');
    cacheCanvas.width = 450;
    cacheCanvas.height = 450;
    const cacheContext = cacheCanvas.getContext('2d');
    cacheContext.strokeStyle = '#696969';
    for (let i = 0; i < 15; i++) {
        cacheContext.moveTo(15 + i * 30, 15);
        cacheContext.lineTo(15 + i * 30, 435);
        cacheContext.stroke();
        cacheContext.moveTo(15, 15 + i * 30);
        cacheContext.lineTo(435, 15 + i * 30);
        cacheContext.stroke();
    }
    // 绘制五点
    const points = [[7, 7], [3, 3], [11, 3], [3, 11], [11, 11]];
    for (let coords of points) {
        cacheContext.beginPath();
        cacheContext.arc(15 + coords[0] * 30, 15 + coords[1] * 30, 3, 0, 2 * Math.PI);
        cacheContext.closePath();
        cacheContext.fill();
    }
    boardContext.drawImage(cacheCanvas, 0, 0);
}

/**
 * 绘制棋子
 * @param x 棋子在棋盘上的 x 坐标
 * @param y 棋子在棋盘上的 y 坐标
 * @param color 棋子颜色 (1表示黑色，2表示白色)
 */
function drawOneChess(x, y, color) {
    const cacheCanvas = document.createElement('canvas');
    cacheCanvas.width = 450;
    cacheCanvas.height = 450;
    const cacheContext = cacheCanvas.getContext('2d');
    cacheContext.beginPath();
    cacheContext.arc(15 + x * 30, 15 + y * 30, 13, 0, 2 * Math.PI);
    cacheContext.closePath();
    // 渐变
    const gradient = cacheContext.createRadialGradient(15 + x * 30 + 2, 15 + y * 30 - 2, 13, 15 + x * 30 + 2, 15 + y * 30 - 2, 0);
    if (color === 1) {
        gradient.addColorStop(0, '#0a0a0a');
        gradient.addColorStop(1, '#636766');
    } else {
        gradient.addColorStop(0, '#d1d1d1');
        gradient.addColorStop(1, '#f9f9f9');
    }
    cacheContext.fillStyle = gradient;
    cacheContext.fill();
    chessContext.drawImage(cacheCanvas, 0, 0);
}

/**
 * 擦除棋子
 * @param x 棋子在棋盘上的 x 坐标
 * @param y 棋子在棋盘上的 y 坐标
 */
function wipeOneChess(x, y) {
    // 擦除该圆
    chessContext.clearRect((x) * 30, (y) * 30, 30, 30);
}

/**
 * 标记棋子
 * @param x 棋子在棋盘上的 x 坐标
 * @param y 棋子在棋盘上的 y 坐标
 */
function markOneChess(x, y) {
    if (x < 0 || y < 0 || x > 14 || y > 14) {
        return;
    }
    const cacheCanvas = document.createElement('canvas');
    cacheCanvas.width = 450;
    cacheCanvas.height = 450;
    const cacheContext = cacheCanvas.getContext('2d');
    cacheContext.beginPath();
    cacheContext.arc(15 + x * 30, 15 + y * 30, 14, 0, 2 * Math.PI);
    cacheContext.closePath();
    cacheContext.lineWidth = 2;
    cacheContext.strokeStyle = '#f8de43';
    cacheContext.stroke();
    markContext.drawImage(cacheCanvas, 0, 0);
    setTimeout(`wipeMark(${x}, ${y})`, 500);
}

/**
 * 擦除棋子标记
 * @param x 棋子在棋盘上的 x 坐标
 * @param y 棋子在棋盘上的 y 坐标
 */
function wipeMark(x, y) {
    markContext.clearRect((x) * 30, (y) * 30, 30, 30);
    if (++markFrequency >= maxMarkFrequency) {
        markFrequency = 0;
        return;
    }
    setTimeout(`markOneChess(${x}, ${y})`, 500);
}

/**
 * 绘制所有棋子
 * @param chessList 棋子列表
 */
function drawAllChess(chessList) {
    chessList.forEach((coords, index) => {
        const x = coords[0];
        const y = coords[1];
        const color = index % 2 === 0 ? 1 : 2;
        drawOneChess(x, y, color);
    });
}

/**
 * 擦除所有棋子
 */
function wipeAllChess() {
    chessContext.clearRect(0, 0, 450, 450);
}

/**
 * 清空棋盘
 */
function clearBoard() {
    boardContext.clearRect(0, 0, 450, 450);
    chessContext.clearRect(0, 0, 450, 450);
}